import React from 'react';
// import classnames from 'classnames';
import './index.module.scss';
import { useNavigate } from 'react-router-dom';
import { Dialog } from 'antd-mobile';
import { RightOutline } from 'antd-mobile-icons';
import { getToken } from '../../../../utils/localStorge';

// import AvatarImg from './avatar.svg';
interface CenterListProps {
	centerDataList: Array<{ name: string; src: JSX.Element }>;
}
export default function CenterList(props: CenterListProps) {
	const { centerDataList } = props;
	const navigate = useNavigate();
	const token = getToken();
	const clickHandler = (val: number) => {
		if (!token) {
			Dialog.confirm({
				content:'你还没有登录，是否前往登录？',
				onConfirm: async () => {
					navigate('/login');
				},
			})
			return
		}
		switch (val) {
			case 0:
				navigate(`/passengers?show=0`);
				break
			case 1:
				navigate(`/orderList`);
				break;
			case 2:
				navigate(`/services`);
				break;
		}
	}
	return (
		<div styleName={token ? 'center-content login' : 'center-content'}>
			{
				centerDataList.map((item, index) =>
					<div styleName='item' key={index} onClick={() => clickHandler(index)}>
						<div styleName='item-left'>
							<div styleName="icon">{item.src}</div>
							<span>{item.name}</span>
						</div>
						<div styleName="item-right">
							<RightOutline fontSize={12} />
						</div>
					</div>
				)
			}
		</div>
	);
}
